<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <div>统计数量{{ totalCount }}</div>
    <button v-on:click="faAdd">数量+1</button>
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <div>
      <MyLeft :msg="message" :user="userInfo" @numchange="getNewToal" ref="myLeft"></MyLeft>
    </div>

    <div>
      <keep-alive include="MyLow">
          <component :is="comName" :list="userList">

             <template #sort1>
                <h3>低级组件1</h3>
             </template>
             <template #sort2>
                <h3>低级组件3</h3>
             </template>
             <template #default>
                <h1>我来插队的</h1>
             </template>

             <template #showTable="user">
                <tr>
                  <td>{{ user.id }}</td>
                  <td>{{ user.name }}</td>
                  <td>{{ user.age }}</td>
                </tr>
             </template>
          </component>
      </keep-alive>

      <br>
      <button @click="comName = 'MyHight'">展示高组件</button>
      <button @click="comName = 'MyLow'">展示低组件</button>

      <!-- <a href="#hight">Hight</a>&nbsp;
      <a href="#low">Low</a> -->
      <!-- 定义路由连接 -->
      <router-link to="/hight">Hight组件</router-link>
      <router-link to="/low">Low组件</router-link>
      <hr>
      <!-- 定义路由占位符 -->
      <router-view></router-view>

    </div>

  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import MyLeft from './components/MyLeft.vue'
import MyHight from './components/MyHight.vue'
import MyLow from './components/MyLow.vue'

export default {
  name: 'App',
  components: {
    HelloWorld,
    MyLeft,
    MyHight,
    MyLow
  },
  data () {
    return {
      message: '诛仙寻宝',
      userInfo: { name: 'zx', age: 20 },
      totalCount: 0,
      comName: 'MyHight',
      userList: [{
        id: '1',
        name: '束庆乐',
        age: 100
      }]
    }
  },
  methods: {
    getNewToal (val) {
      this.totalCount = val
    },
    faAdd () {
      this.$refs.myLeft.add()
    }
  },
  created () {
    // console.log('crete函数执行')

    // window.onhashchange = () => {
    //   console.log('hash变化', location.hash)

    //   switch (location.hash) {
    //     case '#hight':
    //       console.log('hight')

    //       this.comName = 'MyHight'
    //       break
    //     case '#low':
    //       console.log('low')

    //       this.comName = 'MyLow'
    //       break
    //     default:
    //       this.comName = 'MyHight'
    //   }
    // }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
